<script setup lang="ts">
import * as echarts from "Echarts";
import { onMounted, ref } from "vue";
const charts = ref(null);
onMounted(() => {
    if (charts.value) {
        const myChart = echarts.init(charts.value);
        const option = {
            title: {
                text: '拥有产品以及增值服务数量'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['消息通知', '定时更新', 'ECS服务', '对象存储', 'CDN加速', '公网IP']
            },
            series: [
                {
                    name: '2023',
                    type: 'bar',
                    data: [1, 20, 22, 12, 33, 23]
                },
                {
                    name: '2024',
                    type: 'bar',
                    data: [11, 33, 22, 24, 54, 33]
                }
            ]
        };;
        myChart.setOption(option);
    }
});
</script>

<template>
    <div class="charts" ref="charts" style="width: 600px; height: 400px"></div>
</template>

<style lang="scss" scoped></style>
